import { Component } from '@angular/core';
import { MenuItem } from '@iux/live';

const CommonItems = [
  { id: 'Edit', label: 'Edit' },
  { id: 'Delete', label: 'Delete', disabled: true },
  {
    id: 'File',
    label: 'File',
    items: [
      { id: 'File-Create', label: 'Create' },
      { id: 'File-Open', label: 'Open' },
      { id: 'File-Save', label: 'Save' },
    ],
  },
  {
    id: 'Do',
    label: 'Do',
    items: [
      { id: 'Do-Undo', label: 'Undo' },
      { id: 'Do-Redo', label: 'Redo' },
    ],
  },
  { id: 'Help', label: 'Help' },
  {
    id: 'Actions',
    label: 'Actions',
    disabled: true,
    divide: true,
  },
  { id: 'Exit', label: 'Exit' },
];

const ComplexItems = [
  {
    id: 'File',
    label: 'File',
    items: [
      { id: 'File-Create', label: 'Create' },
      { id: 'File-Open', label: 'Open' },
      { id: 'File-Save', label: 'Save' },
    ],
  },
  { id: 'Edit', label: 'Edit' },
  { id: 'Delete', label: 'Delete', disabled: true },
  {
    id: 'Do',
    label: 'Do',
    items: [
      { id: 'Do-Undo', label: 'Undo' },
      { id: 'Do-Redo', label: 'Redo' },
    ],
  },
  { id: 'Help', label: 'Help' },
  {
    id: 'Actions',
    label: 'Actions',
    disabled: true,
    divide: true,
  },
  { id: 'Exit', label: 'Exit' },
];
@Component({
  templateUrl: './basic.component.html',
})
export class BasicComponent {
  commonItems: MenuItem[] = CommonItems;
  complexItems: MenuItem[] = ComplexItems;

  commonSelection;
  complexSelection;

  commonItemsFn = (): MenuItem[] => this.commonItems;

  complexItemsFn = (): MenuItem[] => this.complexItems;

  onClick(event): void {
    this.commonSelection = JSON.stringify(event.item);
  }
  onClick2(event): void {
    this.complexSelection = JSON.stringify(event.item);
  }
}
